<template>
	<view class="list-container">
	  <!-- 质检单列表 -->
	  <scroll-view 
		class="list-container" 
		scroll-y="true"
		@scrolltolower="loadMore"
		refresher-enabled
		:refresher-triggered="refreshing"
		@refresherrefresh="onRefresh"
	  >
		<view 
		  v-for="(item, index) in qualityList" 
		  :key="index" 
		  class="list-item"
		>
		  <!-- 计划号 -->
		  <view class="plan-number">
			<text class="label">计划号：</text>
			<text class="value">{{ item.plan_number || item.planNumber }}</text>
		  </view>
		  
		  <!-- 详细信息 -->
		  <view class="item-details">
			<view class="detail-row">
			  <text class="label">车牌号</text>
			  <text class="value">{{ item.license_plate || item.licensePlate }}</text>
			</view>
			
			<view class="detail-row">
			  <text class="label">驾驶员</text>
			  <text class="value">{{ item.driver }}</text>
			</view>
			
			<view class="detail-row">
			  <text class="label">销售物料</text>
			  <text class="value">{{ item.material }}</text>
			</view>
			
			<view class="detail-row">
			  <text class="label">打印时间</text>
			  <text class="value">{{ item.print_time || item.printTime }}</text>
			</view>
			
			<view class="detail-row">
			  <text class="label">二磅时间</text>
			  <text class="value">{{ item.weigh_time || item.weighTime }}</text>
			</view>
		  </view>
		</view>
	  </scroll-view>
	  
	  <!-- 底部浮动按钮 -->
	  <view class="floating-button-box">
		<view class="floating-button" @click="viewQualityDetail">
			<text class="button-text">查看质检单</text>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		showLoginModal: false, // 是否显示登录弹窗
		loginForm: {
		  username: '',
		  password: '',
		  usernameFocus: false,
		  passwordFocus: false
		},
		qualityList: [], // 质检单列表
		loading: false, // 加载状态
		refreshing: false, // 下拉刷新状态
		noMore: false, // 是否没有更多数据
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		total: 0 // 总数量
	  }
	},
	onLoad(options) {
		if (options.id) {
			this.getQualityList(options.id)
		}
	},
	methods: {
	  // 获取质检单列表
	getQualityList(id = null) {
		uni.showLoading({
			title: '加载中...'
		});
		this.$api.qualityInspection.read(id).then(res => {
			if (!res) return
			this.qualityList = [res]
		}).finally(() => {
			uni.hideLoading();
		})
	  },
	  
	  // 加载更多
	  loadMore() {
		if (this.loading || this.noMore) return;
		this.pageNo++;
		this.getQualityList();
	  },
	  
	  // 下拉刷新
	  onRefresh() {
		this.refreshing = true;
		this.noMore = false;
		this.getQualityList(true);
	  },
	  
	  // 查看详情
	  viewDetail(item) {
		uni.navigateTo({
		  url: `/pages/detail/detail?id=${item.id}`
		});
	  },
	  
	  // 新增质检单
	  addNew() {
		  uni.navigateTo({
			  url: `/pages/detail/detail`
		  });
	  },
	  
	  // 查看质检单详情
	  viewQualityDetail() {
		if (this.qualityList.length > 0) {
		  const item = this.qualityList[0];
		  uni.navigateTo({
			url: `/pages/scan/detail?id=${item.id}`
		  });
		} else {
		  uni.showToast({
			title: '暂无质检单数据',
			icon: 'none'
		  });
		}
	  },
	  
	  // 关闭登录弹窗
	  closeLoginModal() {
		this.showLoginModal = false;
		this.resetLoginForm();
	  },
	  
	  // 重置登录表单
	  resetLoginForm() {
		this.loginForm = {
		  username: '',
		  password: '',
		  usernameFocus: false,
		  passwordFocus: false
		};
	  },
	  
	  // 处理登录
	  handleLogin() {
		// 表单验证
		if (!this.loginForm.username) {
		  uni.showToast({
			title: '请输入账号',
			icon: 'none'
		  });
		  return;
		}
		
		if (!this.loginForm.password) {
		  uni.showToast({
			title: '请输入密码',
			icon: 'none'
		  });
		  return;
		}
		
		// 模拟登录验证
		if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
		  uni.showToast({
			title: '登录成功',
			icon: 'success'
		  });
		  
		  // 保存登录状态
		  uni.setStorageSync('isLoggedIn', true);
		  uni.setStorageSync('username', this.loginForm.username);
		  
		  // 关闭弹窗
		  this.closeLoginModal();
		} else {
		  uni.showToast({
			title: '账号或密码错误',
			icon: 'none'
		  });
		}
	  }
	}
  }
  </script>
  
  <style scoped>
  .list-container {
	height: 100vh;
	background-color: #F5F5F5;
	display: flex;
	flex-direction: column;
	padding: 10rpx;
  }
  
  .header {
	background-color: #007AFF;
	padding: 20rpx 30rpx;
	text-align: center;
  }
  
  .title {
	color: white;
	font-size: 36rpx;
	font-weight: bold;
  }
  
  .list-item {
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	border-radius: 24rpx;
	background-color: #007AFF;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
  
  .plan-number {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	border-radius: 24rpx 24rpx 0 0;
	padding:12rpx 32rpx
  }
  
  .plan-number .label {
	color: #fff;
	font-size: 28rpx;
	margin-right: 12rpx;
  }
  
  .plan-number .value {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
  }
  
  .item-details {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	background-color: #fff;
  }
  
  .detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .detail-row .label {
	color: #333;
	font-size: 26rpx;
	min-width: 140rpx;
	font-weight: 500;
  }
  
  .detail-row .value {
	color: #333;
	font-size: 26rpx;
	flex: 1;
	text-align: right;
  }
  
  .empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
  }
  
  .empty-text {
	color: #999;
	font-size: 28rpx;
  }
  
  .loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
  }
  
  .loading-text {
	color: #007AFF;
	font-size: 28rpx;
  }
  
  .no-more-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
  }
  
  .no-more-text {
	color: #999;
	font-size: 24rpx;
  }
  
  .floating-button-box {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0rpx;
	z-index: 999;
	padding: 32rpx 24rpx;
	background-color: #fff;
	box-sizing: border-box;
  }

  .floating-button {
	background-color: #007AFF;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
  }
  .button-text {
	color: white;
	font-size: 32rpx;
	font-weight: bold;
  }
  
  
  /* 登录弹窗样式 */
  .login-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .login-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
  }
  
  .login-content {
	position: relative;
	width: 600rpx;
	background-color: white;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  }
  
  .login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx 20rpx;
	background-color: #007AFF;
  }
  
  .login-title {
	color: white;
	font-size: 36rpx;
	font-weight: bold;
  }
  
  .close-btn {
	color: white;
	font-size: 48rpx;
	font-weight: bold;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .login-form {
	padding: 40rpx 30rpx;
  }
  
  .form-item {
	margin-bottom: 30rpx;
  }
  
  .form-label {
	display: block;
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 15rpx;
  }
  
  .form-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #E5E5E5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #FAFAFA;
  }
  
  .form-input:focus {
	border-color: #007AFF;
	background-color: white;
  }
  
  .login-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
  }
  
  .btn {
	flex: 1;
	height: 80rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .btn-cancel {
	background-color: #F5F5F5;
	color: #666;
  }
  
  .btn-login {
	background-color: #007AFF;
	color: white;
  }
  
  .btn:active {
	opacity: 0.8;
  }
  
  /* 浮动按钮组样式 */
  .floating-buttons {
	position: fixed;
	right: 30rpx;
	bottom: 100rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	z-index: 999;
  }
  
  .login-btn {
	background-color: #FF9500;
  }
  
  .login-icon {
	color: white;
	font-size: 32rpx;
  }
  </style>
  